<template>
    <div class="homework">
        <!--发布作业-->
        <div class="fabu">
            <RouterLink to="/layout/fabu" class="fabu-button">发布作业</RouterLink> 
        </div>
       
        <div class="negative">
            <!--导航-->
            <ul class="shaixuan">
                <RouterLink 
                    :to="{ 
                        path: '/layout/homework/all',
                        query: { courseclassS: courseclassS }
                    }" 
                    class="menu-item"
                    :class="{ 'highlight-tab': hasHighlightInComponent('all') }"
                >全部</RouterLink>
                <RouterLink 
                    :to="{ 
                        path: '/layout/homework/doing',
                        query: { courseclassS: courseclassS }
                    }" 
                    class="menu-item"
                    :class="{ 'highlight-tab': hasHighlightInComponent('doing') }"
                >进行中</RouterLink>
                <RouterLink 
                    :to="{ 
                        path: '/layout/homework/done',
                        query: { courseclassS: courseclassS }
                    }" 
                    class="menu-item"
                    :class="{ 'highlight-tab': hasHighlightInComponent('done') }"
                >已截至</RouterLink>
                <RouterLink 
                    :to="{ 
                        path: '/layout/homework/correct',
                        query: { courseclassS: courseclassS }
                    }" 
                    class="menu-item"
                    :class="{ 'highlight-tab': hasHighlightInComponent('correct') }"
                >已批改</RouterLink>
            </ul>
            <!-- 搜索模块 -->
            <div class="search">
                <el-input
                    v-model="searchKeyword"
                    placeholder="请输入作业名称"
                    clearable
                    @input="handleSearch"
                    style="width: 200px;">
                    <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
                </el-input>
            </div>
        </div>

        <!-- 路由出口 -->
        <div class="content-area">
            <router-view 
                :courseclassS="courseclassS"
                :highlightedRows="highlightedRows"
                ref="childComponent">
            </router-view>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { RouterView } from 'vue-router';
export default {
    name: 'HomeworkIndex',
    data() {
        return {
            courseclassS: '',
            searchKeyword: '',
            highlightedRows: new Set(),
            componentResults: {
                all: new Set(),
                doing: new Set(),
                done: new Set(),
                correct: new Set()
            }
        }
    },
    created() {
        // 从路由 query 中获取参数
        const query = this.$route.query;
        if (query && query.courseclassS) {
            this.courseclassS = query.courseclassS;
            console.log('Index.vue created - 接收到的课程名称:', this.courseclassS);
        }
    },
    watch: {
        // 监听路由参数变化
        '$route.query.courseclassS': {
            handler(newVal) {
                if (newVal) {
                    this.courseclassS = newVal;
                    console.log('路由参数变化:', this.courseclassS);
                }
            },
            immediate: true
        }
    },
    methods: {
        async handleSearch() {
            if (!this.searchKeyword.trim()) {
                this.highlightedRows.clear();
                Object.keys(this.componentResults).forEach(key => {
                    this.componentResults[key].clear();
                });
                if (this.$refs.childComponent) {
                    this.$refs.childComponent.$forceUpdate();
                }
                return;
            }
            
            try {
                const response = await axios.get('http://localhost:9999/homework/getHomeworkByHomeworkName', {
                    params: {
                        homeworkName: this.searchKeyword
                    }
                });
                
                if (response.data && response.data.length > 0) {
                    this.highlightedRows.clear();
                    Object.keys(this.componentResults).forEach(key => {
                        this.componentResults[key].clear();
                    });
                    
                    response.data.forEach(result => {
                        this.highlightedRows.add(result.homeworkId);
                        this.componentResults.all.add(result.homeworkId);
                        switch(result.state) {
                            case '进行中':
                                this.componentResults.doing.add(result.homeworkId);
                                break;
                            case '已截至':
                                this.componentResults.done.add(result.homeworkId);
                                break;
                            case '已批改':
                                this.componentResults.correct.add(result.homeworkId);
                                break;
                        }
                    });
                    
                    if (this.$refs.childComponent) {
                        this.$refs.childComponent.$forceUpdate();
                    }
                } else {
                    this.$message.warning('未找到匹配的作业');
                    this.highlightedRows.clear();
                    Object.keys(this.componentResults).forEach(key => {
                        this.componentResults[key].clear();
                    });
                }
            } catch (error) {
                console.error('搜索失败:', error);
                this.$message.error('搜索失败，请稍后重试');
            }
        },
        hasHighlightInComponent(component) {
            return this.componentResults[component].size > 0;
        }
    }
}

</script>

<style lang="less" scoped>

.fabu {
    position: absolute;
    top: 120px;
    right: 100px;
    .fabu-button {
        display: inline-block;
        padding: 10px 20px;
        background-color:rgba(53, 181, 208, 1);
        color: white;
        text-decoration: none;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s;
        &:hover {
            background-color: rgb(32, 136, 159);
        }
    }
}
.negative {
    background: rgb(236, 236, 236);
    width: 1260px; /* 设置课程容器的宽度 */
    height: 30px; /* 让高度根据内容自适应 */
    margin: 110px auto; /* 水平居中 */
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 水平居中 */
    align-items: center; /* 垂直对齐到顶部 */
    padding: 20px; /* 内边距 */
}

.shaixuan {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    padding: 10px;
}

.shaixuan .menu-item {
    display: inline-block;
    line-height: 25px;
    padding: 0px 30px; /* 增加间距 */
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-right: 10px;
    background-color: white; /* 添加白色背景 */
    color: black; /* 设置字体颜色为黑色 */
    &.highlight-tab {
        background-color: #fdf5e6;
        border-color: #f5deb3;
        color: #ff7f50;
    }
}

.shaixuan .menu-item:hover {
    color: greenyellow;
}

.search {
    display: flex;
    align-items: center;
    padding: 28px;
    padding-right: 280px;
}

</style>